<template>
  <div>
   <h1>{{count}}</h1>
   <button @click="count++">累加</button>
   <button @click="destroy">卸载组件</button>
   <hr>
   <Header :count='count'/>
  </div>
</template>

<script>
import Header from './components/Header.vue'
export default {
name:'App',
components:{
    Header
  },
data(){
  return{
   count:1,
  }
},
beforeCreate() {
   console.log('-----beforeCreate-----'); 
},
created() {
   console.log('----created----'); 
},
beforeMount() {
   console.log('----beforeMount----');
},
mounted() {
     console.log('----mounted----');
},
beforeUpdate() {
    console.log('----beforeUpdate----');
},
updated() {
     console.log('----updated----');
},
beforeDestroy() {
    console.log('----beforeDestroy----');
},
destroyed() {
    console.log('----destroyed----');
},

 methods: {
    destroy() {
      this.$destroy();
    },
  },
}
</script>

<style>

</style>